<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="用户账号" prop="userName">
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入用户账号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="用户昵称" prop="nickName">
        <el-input
          v-model="queryParams.nickName"
          placeholder="请输入用户昵称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
          搜索
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['weiriya:member:add']"
        >
          新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['weiriya:member:remove']"
        >
          删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['weiriya:member:export']"
        >
          导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="memberList"
      border
      stripe
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="#" type="index" width="80" align="center">
        <template slot-scope="scope">
          <span>{{
            (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="头像" align="center" width="100">
        <template slot-scope="scope">
          <div v-if="scope.row.avatar">
            <img
              :src="baseUrl + scope.row.avatar"
              style="width: 50px; height: 50px; border-radius: 50%"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="用户账号" align="center" prop="userName" width="120" />
      <el-table-column label="用户昵称" align="center" prop="nickName" />
      <el-table-column label="用户类型" align="center" width="120">
        <template slot-scope="scope">
          <el-tag
            :type="
              scope.row.memberType == 1
                ? 'success'
                : scope.row.memberType == 2
                ? 'danger'
                : 'info'
            "
            effect="plain"
          >
            {{
              scope.row.memberType == 1
                ? "充电/停车"
                : scope.row.memberType == 2
                ? "停车"
                : "临时用户"
            }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="会员类型" align="center" width="120">
        <template slot-scope="scope">
          <el-tag
            :type="
              scope.row.vipType == 1
                ? 'success'
                : scope.row.vipType == 2
                ? 'warning'
                : scope.row.vipType == 3
                ? 'danger'
                : 'info'
            "
            effect="plain"
          >
            {{
              scope.row.vipType == 1
                ? "月卡"
                : scope.row.vipType == 2
                ? "季卡"
                : scope.row.vipType == 3
                ? "年卡"
                : scope.row.memberType == 3
                ? "非会员"
                : "已过期"
            }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="帐号状态" align="center" width="120">
        <template slot-scope="scope">
          <el-tooltip
            :content="scope.row.status == 1 ? '点击禁用' : '点击启用'"
            placement="top"
          >
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              :active-value="1"
              inactive-color="#ff4949"
              :inactive-value="2"
              @change="handleStatus(scope.row)"
            >
            </el-switch>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="用户余额(元)" align="center" prop="wallet" width="120" />
      <el-table-column label="停车点位" align="center" prop="areaName" width="180" />
      <el-table-column label="单元号" align="center" prop="unitNo" width="180" />
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="会员信息" align="center" width="120">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            v-if="scope.row.memberType == 1 || scope.row.memberType == 2"
            @click="handleRenew(scope.row)"
            v-hasPermi="['weiriya:member:edit']"
          >
            查看
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-medal"
            v-if="scope.row.memberType == 3"
            @click="handleUpgrade(scope.row)"
            v-hasPermi="['weiriya:member:edit']"
          >
            升级会员
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <div>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['weiriya:member:edit']"
            >
              修改
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['weiriya:member:remove']"
            >
              删除
            </el-button>
          </div>
          <div>
            <el-button size="mini" type="text" @click="viewDoor(scope.row)">
              停车记录
            </el-button>
            <el-button size="mini" type="text" @click="viewCharge(scope.row)">
              充电记录
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog title="会员信息" :visible.sync="memberShow" width="50%">
      <el-form :model="form" ref="form" :rules="rules" label-width="100px">
        <el-table :data="vipRecord" border style="width: 100%">
          <el-table-column prop="type" label="用户类型" align="center">
            <template slot-scope="scope">
              {{
                scope.row.type == 1
                  ? "充电/停车"
                  : scope.row.type == 2
                  ? "停车"
                  : "临时用户"
              }}
            </template>
          </el-table-column>
          <el-table-column prop="vipType" label="月租类型" align="center">
            <template slot-scope="scope">
              {{
                scope.row.vipType == 1
                  ? "月卡"
                  : scope.row.vipType == 2
                  ? "季卡"
                  : scope.row.vipType == 3
                  ? "年卡"
                  : "会员到期"
              }}
            </template>
          </el-table-column>
          <el-table-column prop="startTime" label="开始时间" align="center" />
          <el-table-column prop="endTime" label="结束时间" align="center" />
        </el-table>
        <div style="margin-top: 10px;">
          <el-button
            size="mini"
            type="warning"
            @click="renewShow = !renewShow"
            v-hasPermi="['weiriya:member:edit']"
          >
            续费
          </el-button>
        </div>
        <div v-if="renewShow" style="display: flex">
          <el-form-item label="用户类型" prop="memberType">
            <el-select
              v-model="form.memberType"
              style="width: 100%"
              placeholder="请选择用户类型"
              @change="changeMember"
            >
              <el-option label="充电/停车" :value="1" />
              <el-option label="停车" :value="2" />
              <!-- <el-option label="临时用户" value="3" /> -->
            </el-select>
          </el-form-item>
          <el-form-item label="月租类型" prop="vipType">
            <el-select v-model="form.vipType" style="width: 100%" @change="changeType">
              <el-option label="月卡" :value="1" />
              <el-option label="季卡" :value="2" />
              <el-option label="年卡" :value="3" />
              <!-- <el-option label="会员到期" value="4" /> -->
            </el-select>
          </el-form-item>
        </div>
        <div v-if="renewShow" style="display: flex">
          <el-form-item label="开始时间" prop="vipStartTime">
            <el-date-picker
              v-model="form.vipStartTime"
              type="datetime"
              placeholder="选择日期"
              :picker-options="{
                disabledDate(time) {
                  return form.vipEndTime
                    ? time.getTime() > new Date(form.vipEndTime).getTime()
                    : false;
                },
              }"
              value-format="yyyy-MM-dd HH:mm:ss"
              default-time="00:00:00"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="结束时间" prop="vipEndTime">
            <el-date-picker
              v-model="form.vipEndTime"
              type="datetime"
              placeholder="选择日期"
              :picker-options="{
                disabledDate(time) {
                  return form.vipStartTime
                    ? time.getTime() < new Date(form.vipStartTime).getTime()
                    : false;
                },
              }"
              value-format="yyyy-MM-dd HH:mm:ss"
              default-time="23:59:59"
              style="width: 100%"
            />
          </el-form-item>
        </div>
        <div v-if="renewShow" style="display: flex">
          <el-form-item label="停车点位" prop="areaId">
            <el-select
              v-model="form.areaId"
              filterable
              clearable
              style="width: 100%"
              placeholder="请选择停车点位"
            >
              <el-option
                v-for="item in areaList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
                <span>{{ item.name }}</span>
                <span v-if="item.address" style="color: #ccc"> ({{ item.address }})</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="续费价格" prop="vipPrice">
            <el-input
              v-model.number="form.vipPrice"
              type="number"
              placeholder="请输入价格"
              clearable
            >
              <span slot="suffix">元</span>
            </el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer">
        <el-button @click="memberShow = false">取 消</el-button>
        <el-button type="primary" @click="memberSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listMember,
  delMember,
  putMemberStatus,
  postRenew,
  postVipInfo,
  getMemberVipRecord,
} from "@/api/weiriya/member";
import { listArea } from "@/api/weiriya/area";

export default {
  name: "Member",
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      loading: false, // 遮罩层
      ids: [], // 选中数组
      single: true, // 非单个禁用
      multiple: false, // 非多个禁用
      showSearch: true, // 显示搜索条件
      total: 0, // 总条数
      memberList: [], // 用户信息表格数据
      memberShow: false, // 会员信息弹窗
      renewShow: false, // 是否续费
      queryParams: {
        // 查询参数
        pageNum: 1,
        pageSize: 10,
        userName: null,
        nickName: null,
      },
      vipRecord: [], // 会员记录
      form: {},
      areaList: [], // 区域列表
      rules: {
        memberType: [{ required: true, message: "会员类型不能为空", trigger: "blur" }],
        vipType: [{ required: true, message: "月租类型不能为空", trigger: "blur" }],
        vipStartTime: [{ required: true, message: "开始时间不能为空", trigger: "blur" }],
        vipEndTime: [{ required: true, message: "结束时间不能为空", trigger: "blur" }],
        vipPrice: [{ required: true, message: "价格不能为空", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 查询用户信息列表
    getList() {
      this.loading = true;
      listMember(this.queryParams)
        .then((res) => {
          this.memberList = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 查询停车点位列表
    getAreaList() {
      let data = {
        pageNum: 1,
        pageSize: 1000,
      };
      listArea(data).then((res) => {
        this.areaList = res.rows;
      });
    },
    // 切换用户类型
    changeMember() {
      this.changeType(this.form.vipType);
    },
    // 状态切换
    handleStatus(row) {
      putMemberStatus({ id: row.id }).then((res) => {
        console.log(res);
      });
    },
    // 打开会员信息
    handleRenew(row) {
      this.form = Object.assign({}, row);
      if (row.vipType == 4) this.form.vipType = 1;
      this.changeType(this.form.vipType);
      this.renewShow = false;
      this.getAreaList();
      getMemberVipRecord(row.id).then((res) => {
        if (res.code == 200) {
          this.vipRecord = res.data;
          this.memberShow = true;
        }
      });
    },
    // 升级会员
    handleUpgrade(row) {
      this.$router.push({
        path: "/weiriya/memberForm",
        query: { id: row.id, type: "upgrade" },
      });
    },
    // 会员类型改变
    changeType(val) {
      let data = {
        id: this.form.id,
        memberType: this.form.memberType,
        vipType: val,
      };
      postVipInfo(data).then((res) => {
        this.form.vipStartTime = res.data.startTime;
        this.form.vipEndTime = res.data.endTime;
        this.form.vipPrice = res.data.vipPrice;
      });
    },
    // 会员信息提交
    memberSubmit() {
      if (this.renewShow) {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            let data = Object.assign({}, this.form);
            postRenew(data).then((res) => {
              this.$modal.msgSuccess("续费成功");
              this.getList();
              this.memberShow = false;
            });
          }
        });
      } else {
        this.memberShow = false;
      }
    },
    // 查看停车记录
    viewDoor(row) {
      this.$router.push({
        path: "/depositAndCharge/depositRecord",
        query: { id: row.id },
      });
    },
    // 查看充电记录
    viewCharge(row) {
      this.$router.push({
        path: "/depositAndCharge/chargeRecord",
        query: { id: row.id },
      });
    },
    // 搜索
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 重置
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    // 新增
    handleAdd() {
      this.$router.push({
        path: "/weiriya/memberForm",
        query: { type: "add" },
      });
    },
    // 修改
    handleUpdate(row) {
      const id = row.id || this.ids;
      this.$router.push({
        path: "/weiriya/memberForm",
        query: { id, type: "edit" },
      });
    },
    // 删除
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除用户信息编号为"' + ids + '"的数据项？')
        .then(() => {
          delMember(ids).then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          });
        })
        .catch(() => {});
    },
    // 导出
    handleExport() {
      this.download(
        "weiriya/member/export",
        {
          ...this.queryParams,
        },
        `member_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.el-form-item {
  flex: 1;
}
</style>
